<template>

  <div class="TableList">
    <div class="list">
      <table class="listTab" cellspacing="0" cellpadding="0">
        <thead>
        <tr>
          <th v-for="(item,val) in tableHead">{{item.title}}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,key,index) in tableData" :key="item.openId">
          <td v-for="(val,index) in tableHead" :key="index">
            <div v-if="val.key=='sex'">
              <span v-if="item[val.key]==1">男</span>
              <span v-else-if="item[val.key]==2">女</span>
              <span v-else="item[val.key]==0">-</span>
            </div>
            <div v-else-if="val.key=='state'">
              <span v-if="item[val.key]==1" class="red">禁用</span>
              <span v-else="item[val.key]==0" class="green">启用</span>
            </div>
            <div v-else>{{item[val.key]}}</div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name:"TableList",
  data(){
    return {
      tableHead:[
        {key:"name",title:'姓名'},
        {key:"sex",title:'性别'},
        {key:"phone",title:'手机号'},
        {key:"state",title:'状态'},
        {key:"address",title:'地址'}
      ],
      tableData:[
        {name:"张三",phone:"13811112222",state:1,sex:1,address:"北京"},
        {name:"王晓飞",phone:"15634567922",state:0,sex:2,address:"天津"},
        {name:"李浩",phone:"15634567922",state:0,sex:0,address:"北京"},
        {name:"张明",phone:"15634567922",state:0,sex:1,address:"北京"},
      ]
    }
  },
  mounted(){
  }
}
</script>

<style>


.tableList{
  width: 100%;
}

.list{
  width: 98%;
  margin-left: 1%;
  overflow-x:auto;
}
table.listTab{
  width: 100%;
  font-size: 14px;
  color: #6a6a6a;
  border: 1px solid #ececed;
  padding: 1px;
  background-color: #fff;
}
table.listTab th{
  background-color: #ecf0f4;
  padding: 14px 8px;
  text-align: left;
  font-size: 14px;
  border: 1px solid #ecf0f4;
  min-width: 40px;
  color:#292d31;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
table.listTab th.check{
  min-width: 20px;
}
table.listTab tbody > tr td{
  padding: 16px 8px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid #ececed;
  vertical-align: middle;
  word-break: break-all;
  min-width: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
table.listTab tbody > tr td.check{
  min-width: 20px;
}
table.listTab tbody > tr td:first-child{
  width: 20px;
}
table.listTab tbody > tr:hover{
  background-color: #dfeefc;
}
table.listTab tbody > tr.check{
  background-color: #dfeefc;
}
table.listTab tbody > tr:last-child td{
  border-bottom: 0px;
}
table.listTab tbody > tr td a{
  color: #248bfc;
}
table.listTab tbody > tr td input{
  border:1px solid #248bfc;
}
table.listTab tbody > tr td .green{
  color: #72d34b;
  font-weight:bold;
}
table.listTab tbody > tr td .red{
  color: #f00;
  font-weight:bold;
}


</style>
